<template>
  <div
    :style="{height: height === 'auto' ? '200px' : height + 'px'}"
    style="border-bottom: 2px solid rgb(255,255,255,0.3);width:180px"
  >
    <div style="height:52px;border-left:2px solid #00704E;color:#fff">
      <div style="padding-left:7px;height:40%;font-size:14px;font-family: Source Han Sans CN;">北京市电力交易电量/KWH</div>
      <div style="padding-left:13px;height:60%;">
        <div style="font-size:30px">1201</div>
      </div>
    </div>
    <div
      style="height:calc(100% - 57px);background: linear-gradient(0deg, #58968b 0%, rgba(0, 112, 78, 0) 100%);width:100%"
      ref="myChart"
    >
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      height: 200,
      data: {
        number: 1000,
        ary: [
          [0.0, 3.04],
          [8.0, 3.95],
          [3.0, 4.58],
          [9.0, 5.81],
          [1.0, 6.33],
          [4.0, 1.96],
          [6.0, 3.24],
          [4.0, 4.26],
          [2.0, 1.84],
          [7.0, 4.82],
          [5.0, 5.68],
          [4.0, 4.24],
          [3.0, 4.26],
          [7.0, 0.84],
          [7.0, 1.82],
          [7.0, 1.68],
        ],
      },
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      var myChart = echarts.init(this.$refs.myChart);
      var option = {
        grid: {
          // show: true,
          left: "2%",
          right: "2%",
          top: "4%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          show: false,
          boundaryGap: false,
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            symbolSize: 6,
            data: this.data.ary,
            itemStyle: {
              shadowBlur: 4,
              color: "#00ffff",
            },
            type: "scatter",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.css {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>